<template>
	<view class="unit-popup-content">
		<view class="close-row">
			<uni-icons type="closeempty" size="30" @click="close"></uni-icons>
		</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="unit_val" @change="unitChange"
			class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in unit_list" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "my-unit-pop",
		props: {
			unit_val: {

			}
		},
		data() {
			return {
				// 单位弹窗
				visible: true,
				indicatorStyle: `height: 50px;`,
			};
		},
		computed: {
			...mapState('object', ['unit_list'])
		},

		methods: {
			unitChange(e) {
				this.$emit('change', e.detail.value)
			},
			close() {
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss">
	.unit-popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;

		.close-row {
			text-align: end;
			padding: 0 20rpx;
		}

		.picker-view {
			height: 300rpx;

			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
</style>
